<template>
	<div>
		<el-container>
			<!-- 头部 -->
			<el-header>
				<div style=" text-align: right; float: right;">
					<el-link :underline="false" type="primary" style="height: 55px; width: 200px; font-size: 20px;">{{user_id}}</el-link>
				</div>
			</el-header>

			<!-- 搜索框 -->
			<el-header style="background-color: #E9EEF3;">
				<div style="width: 30%; float: left;">
					<el-input placeholder="请输入搜索内容" v-model="search_value">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</div>
				<div style=" float: left; width: 600px; font-size: 18px;">
					<el-link type="primary" :underline="false" @click="download">刷新</el-link>
					<el-link type="success" :underline="false" @click="filtrate" style="margin-left: 10px;">导出数据</el-link>
					<el-link type="success" :underline="false" @click="resetDateFilter" style="margin-left: 10px;">清除日期过滤器</el-link>
					<el-link type="success" :underline="false" @click="clearFilter" style="margin-left: 10px;">清除所有过滤器</el-link>
					<el-link type="primary" :underline="false" @click="get_Violation" style="margin-left: 10px;">获取单条违规记录</el-link>
					<el-link type="primary" :underline="false" @click="get_Violations" style="margin-left: 10px;">所有违规记录</el-link>
					
				</div>
			</el-header>

			<!-- 数据列表 -->
			<el-main>
				<el-table ref="filterTable" :data="tables" background='true' stripe border @selection-change="handleSelectionChange"
				:header-cell-style="{
					'font-weight': '400'}" max-height="700" style="width: 100%" v-loading.fullscreen.lock="fullscreenLoading">
					<!-- 多选 -->
					<el-table-column type="selection" width="40">
					</el-table-column>

					<el-table-column label="序号" type="index" width="65">
						<template scope="scope">
							{{scope.$index + addIndex}}
						</template>
					</el-table-column>
					<el-table-column prop="ids" label="身份证号" sortable width="180" column-key="ids">
					</el-table-column>
					<el-table-column prop="name" sortable label="姓名" width="180">
					</el-table-column>
					<el-table-column prop="phone" label="手机号" width="180" :formatter="formatter">
					</el-table-column>
					<el-table-column prop="site" sortable label="地址">
					</el-table-column>
					<el-table-column prop="date" sortable label="日期" width="180" :filters="[{text: '2019-09-09', value: '2019-09-09'}, {text: '2020-03-02', value: '2020-03-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
					:filter-method="filterHandler">
					</el-table-column>
					<el-table-column prop="status" label="状态" width="100" :filters="[{ text: '在岗', value: '1' }, { text: '离职', value: '0' }]"
					:filter-method="filterTag" filter-placement="bottom-end">
						<template slot-scope="scope">
							<el-tag :type="scope.row.status === '0' ? 'primary' : 'success'" disable-transitions>{{scope.row.status == 1 ? '在岗' : '离职'}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="comment" sortable label="违规记录" width="100">
						<template slot-scope="scope">
							<el-tag :type="scope.row.comment === '无' ? 'success' : 'danger'" disable-transitions effect="dark">{{scope.row.comment}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
						<!-- 查看按钮 -->
						<template slot-scope="scope">
							<el-button type="text" @click="handleClick(scope.row)">修改</el-button>
							<el-dialog title="个人信息修改" :visible.sync="dialogFormVisible" :modal-append-to-body = "false">
								<el-form :model="alter_form">
									<el-form-item label="姓名" :label-width="formLabelWidth">
										<el-input v-model="alter_form.name" disabled></el-input>
									</el-form-item>
									<el-form-item label="身份证号" :label-width="formLabelWidth">
										<el-input v-model="alter_form.ids" disabled></el-input>
									</el-form-item>
									<el-form-item label="地址" :label-width="formLabelWidth">
										<el-input v-model="alter_form.site" disabled></el-input>
									</el-form-item>
									<el-form-item label="时间" :label-width="formLabelWidth">
										<el-input v-model="alter_form.date"></el-input>
									</el-form-item>
									<el-form-item label="手机号" :label-width="formLabelWidth">
										<el-input v-model="alter_form.phone" disabled></el-input>
									</el-form-item>
									<el-form-item label="工作状态" :label-width="formLabelWidth">
										<!-- <el-input v-model="alter_form.status"></el-input> -->
										<el-radio v-model="alter_form.status" label="1">在职</el-radio>
										<el-radio v-model="alter_form.status" label="0">离职</el-radio>
									</el-form-item>
								</el-form>

								<div slot="footer" class="dialog-footer">
									<el-button @click="dialogFormVisible = false">取 消</el-button>
									<el-button type="primary" @click="edited">保存</el-button>
								</div>
							</el-dialog>
							<!-- 增加数据按钮 -->
							<el-button type="text" size="small" @click="add_comment(scope.row)">增加</el-button>
							<el-dialog title="违规记录添加" :visible.sync="dialogFormVisible2" :modal-append-to-body = "false">
								<el-form :model="alter_form">
									<el-form-item label="姓名" :label-width="formLabelWidth">
										<el-input v-model="alter_form.name" disabled></el-input>
									</el-form-item>
									<el-form-item label="身份证号" :label-width="formLabelWidth">
										<el-input v-model="alter_form.ids" disabled></el-input>
									</el-form-item>
									<el-form-item label="违规记录" :label-width="formLabelWidth">
										<el-input placeholder="请输入内容" v-model="reason" class="input-with-select">
											<el-select placeholder="请选择" v-model="rule_type" slot="prepend">
												<el-option label="二类违规" value="2"></el-option>
												<el-option label="三类违规" value="3"></el-option>
												<el-option label="四类违规" value="4"></el-option>
												<el-option label="五类违规" value="5"></el-option>
												<el-option label="工作失误" value="mistake"></el-option>
												<el-option label="警告" value="warning"></el-option>
											</el-select>
										</el-input>
									</el-form-item>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dialogFormVisible2 = false">取 消</el-button>
									<el-button type="primary" @click="add_c_val">保存</el-button>
								</div>
							</el-dialog>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页 -->
				<div v-show="pagi_show" class="block" style="margin-bottom: 30px; margin-top: 20px;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

			</el-main>
		</el-container>
	</div>

</template>

<script>
	// import text from '../components/data/text.json'
	let Base64 = require('js-base64').Base64;
	export default {
		data() {
			return {
				user_id: '', // 显示用户名
				// radio: 3,
				tableData: [], //存放json数据
				total: 0, //总数目
				pagesize: 20, //每页多少条
				currentPage: 1, //当前页
				search_value: '', //搜索值
				pagi_show: true,
				addIndex: 1, //分页索引
				multipleSelection: [], //多选值存放
				fullscreenLoading: true, //页面加载

				// get_data: [],
				get_Vts: [], // 所有违规记录

				// 修改form 框
				// dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible2: false,
				formLabelWidth: '120px', // 输入框宽度
				alter_form: [], // 存放修改后表单
				unalter_form: [], // row对比数据存放

				// 增加form 框
				// comment: [],
				rule_type: '', // 添加
				reason: '',
			}
		},
		computed: {
			// 模糊搜索
			tables() {
				const search_value = this.search_value
				const currentPage = this.currentPage
				const pagesize = this.pagesize
				if (search_value) {
					// this.pagi_show = false
					return this.tableData.filter(data => {
						return Object.keys(data).some(key => {
							return String(data[key]).toLowerCase().indexOf(search_value) > -1
						})
					})
				}
				// 衔接分页按钮
				return this.tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize);
			}
		},
		mounted() {
			// 测试cookie
			console.log(this.$cookies.get('user').username)

			// 传入本地json 数据
			// this.tableData = this.get_data

			// 传递数据总条数
			// let a = this.get_data.length
			// this.total = a
			// this.get_Violations();
			setTimeout(this.download(), 2000)
			// 页面加载
			this.fullscreenLoading = true;
			setTimeout(() => {
				this.fullscreenLoading = false;
			}, 500);

		},
		created() {
			// 路由传参
			// this.id = this.$route.query.id;
			this.user_id = this.$cookies.get('user').username;
		},
		methods: {

			// 1.表格区域
			// 清除日期过滤器
			resetDateFilter() {
				this.$refs.filterTable.clearFilter('ids');
			},
			// 清楚所有过滤器
			clearFilter() {
				this.$refs.filterTable.clearFilter();
			},
			// 格式化指定列
			formatter(row) {
				// console.log('column:',column)
				return row.phone;
			},
			// 开启列筛选，状态筛选
			filterTag(value, row) {
				return row.status === value;
			},
			// 时间筛选
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},

			// 2.分页区域
			// 页面容量改变时运行的函数
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize = val;
				//同步数据
				// 重置分页状态，按新的表格容量加载第一页的数据
				this.currentPage = 1;
				// 重置序号
				this.addIndex = 1;
			},
			// 当前页改变时运行的函数
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				// 同步数据
				this.currentPage = val;
				// 调用加载数据的方法
				this.addIndex = (this.currentPage - 1) * this.pagesize + 1;
			},
			// 多选触发方法
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

			// 导出数据
			filtrate() {
				console.log('刷新')
			},
			// 服务器获取所有数据
			download() {
				// 数据初始化
				this.tableData = []
				// 获取所有违规记录
				this.get_Violations()
				this.axios({
					method: 'get',
					url: 'http://albeibei.cn:8888/select/v1/user/',
					params: this.$cookies.get('user')
				}).then((res) => {
					// console.log('数据库',res.data.data)
					let a = res.data.data.length
					// 获取总条数
					this.total = a
					
					let get_Vts = this.get_Vts
					// console.log('get_Vts', get_Vts)
					
					// json 数组 转成 对象
					for (let v of Object.values(res.data.data)) {
						// 判断是否有违规记录
						let v_com = '无'
						//身份证号解密
						let B_ids = v[0].slice(0, -5)
						B_ids = Base64.decode(B_ids)
						this.tableData.push({
							'ids': B_ids,
							'name': v[1],
							'phone': v[2],
							'site': v[3],
							'date': v[4],
							'status': v[5],
							'comment': v_com
						})
						// 匹配id 绑定违规记录总数
						for (let i of Object.values(get_Vts)) {
							if(B_ids === i.id_card) {
								// 删除最后一个数组,然后添加新数组
								this.tableData.splice(-1, 1);
								// console.log('i',i.id_card)
								v_com = i.count;
								this.tableData.push({
									'ids': B_ids,
									'name': v[1],
									'phone': v[2],
									'site': v[3],
									'date': v[4],
									'status': v[5],
									'comment': v_com
								})
								break;
							}
						}
					}
					// console.log(this.tableData)
				}).catch(() => {
					console.log('获取数据失败')
				})
			},
			
			// 获取单条违规记录
			get_Violation() {
				let cookies_value = this.$cookies.get('user')
				this.axios({
					method: 'post',
					url: 'http://albeibei.cn:8888/select/v1/user/rule/',
					data: {
						cookies_value,
						id_card: this.alter_form.ids
					}
				}).then((res) => {
					// Violation_data res
					console.log('违规记录',res)
					this.$message({
						message: '获取单条记录成功',
						type: 'success',
						center: true
					})
				}).catch(() => {
					this.$message({
						message: '获取单条记录失败',
						type: 'warning',
						center: true
					})
				})
			},
			// 获取所有违规记录
			get_Violations() {
				let cookies_value = this.$cookies.get('user')
				this.axios({
					method: 'post',
					url: 'http://albeibei.cn:8888/select/v1/user/rule/all',
					data: cookies_value,
				}).then((res) => {
					// Violation_data res
					// this.get_data = res.data.msg;
					this.get_Vts = res.data.msg;
					// console.log('违规记录',res)
				}).catch(() => {
					this.$message({
						message: '修改日期失败',
						type: 'warning',
						center: true
					})
				})
			},
			
			// 3.数据修改区域
			// 修改按钮
			handleClick(val) {
				this.dialogFormVisible = true
				this.unalter_form = val
				this.alter_form = JSON.parse(JSON.stringify(this.unalter_form))// 深拷贝
			},
			// 修改内容并发提交
			edited() {
				this.dialogFormVisible = false
				this.axios.all([
					this.edite_date(),
					this.edite_status()
				]).then(
					this.axios.spread(() => {
						// console.log('结果1', typeof(res1))
						// console.log('结果2',res2)
					})
				)
			},
			// 修改日期
			edite_date() {
				if (this.alter_form.date != this.unalter_form.date) {
					console.log('v输出')
					let cookies_value = this.$cookies.get('user')
					return this.axios({
						method: 'post',
						url: 'http://albeibei.cn:8888/update/v1/worktime/',
						data: {
							cookies_value,
							id_card: this.alter_form.ids,
							work_time: this.alter_form.date
						}
					}).then(() => {
						this.download() // 数据刷新
						this.$message({
							message: '修改日期成功',
							type: 'success',
							offset: 40,
							duration: 5000,
							center: true
						})
					}).catch(() => {
						this.$message({
							message: '修改日期失败',
							type: 'warning',
							offset: 40,
							duration: 5000,
							center: true
						})
					})
				}

			},
			// 修改状态
			edite_status() {
				if (this.alter_form.status != this.unalter_form.status) {
					let cookies_value = this.$cookies.get('user')
					return this.axios({
						method: 'post',
						url: 'http://albeibei.cn:8888/update/v1/workstatus/',
						data: {
							cookies_value,
							id_card: this.alter_form.ids,
							work_status: this.alter_form.status
						}
					}).then(() => {
						this.download() // 数据刷新
						this.$message({
							message: '修改状态成功',
							type: 'success',
							offset: 40,
							duration: 5000,
							center: true
						})
					}).catch(() => {
						this.$message({
							message: '修改状态失败',
							type: 'warning',
							offset: 40,
							duration: 5000,
							center: true
						})
					})
				}

			},

			// 4.添加违规记录
			// 添加违规记录
			add_comment(val) {
				console.log('tableData',this.tableData)
				this.dialogFormVisible2 = true
				this.rule_type = '' // 数据初始化
				this.reason = ''
				this.alter_form = val
			},
			// 确认添加内容 
			add_c_val () {
				this.dialogFormVisible2 = false
				// 创建comment 数组,并push对象，push方法只能用于数组
				// this.alter_form.comment = []
				// this.alter_form.comment.push({'rule_type': this.rule_type, 'reason': this.reason})
				// this.unalter_form = this.alter_form.comment
				// console.log('unalter_form', this.alter_form)
				
				let cookies_value = this.$cookies.get('user')
				return this.axios({
					method: 'post',
					url: 'http://albeibei.cn:8888/insert/v1/record/',
					data: {
						cookies_value,
						id_card: this.alter_form.ids,
						rule_type: this.rule_type,
						reason: this.reason
					}
				}).then(() => {
					this.download() // 数据刷新
					this.$message({
						message: '违规记录添加成功',
						type: 'success',
						offset: 40,
						duration: 5000,
						center: true
					})
				}).catch(() => {
					this.$message({
						message: '违规记录添加失败',
						type: 'warning',
						offset: 40,
						duration: 5000,
						center: true
					})
				})
			},
		}
	}
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #e9eef3;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-main {
		background-color: #e9eef3;
		color: #333;
		text-align: center;
		/* line-height: 160px; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	/* .v-modal {
		z-index: 2 !important;
	} */
	
	.el-select .el-input {
		width: 130px;
	}
	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
</style>
